<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="../static/css/bootstrap.css" th:href="@{/css/bootstrap.css}">
  <script src="../static/js/jquery-3.4.1.min.js" th:href="@{/js/jquery-3.4.1.min.js}"></script>
  <script src="../static/js/bootstrap.js" th:href="@{/js/bootstrap.js}"></script>

    <link href="../static/images/favicon.ico" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

</head>

<body>
<div class="header">

<!--  导航栏-->
  <nav class="navbar navbar-inverse center-block"  >
    <div class="container " style="width:800px; margin:0 auto;">
<!--      图标-->
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img class="tb" width="20px" height="20px"  alt="图标" src="../static/images/tb.jpg" th:src="@{images/tb.jpg}">
        </a>
      </div>
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header ">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" th:href="@{/index}">首页</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#" >分类 <span class="sr-only">(current)</span></a></li>
          <li><a href="#" >留言</a></li>
          <li><a href="#" th:href="@{/resource}">资源</a></li>
          <li><a href="#" th:href="@{/image}">照片</a></li>
          <li><a href="#" >我</a></li>
        </ul>

        <form class="navbar-form navbar-right" action="#" th:action="@{/search}" method="post">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search" name="query">
          </div>
          <button type="submit" class="btn btn-default" onclick="document.forms['search'].submit()">查询</button>
        </form>



      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</div>

<div class="middren " >
<!--    轮播图-->
<!--    <div class="container">-->
<!--    <div id="carousel-example-generic" class="carousel slide " data-ride="carousel">-->
<!--        &lt;!&ndash; Indicators &ndash;&gt;-->
<!--        <ol class="carousel-indicators">-->
<!--            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>-->
<!--            <li data-target="#carousel-example-generic" data-slide-to="1"></li>-->
<!--            <li data-target="#carousel-example-generic" data-slide-to="2"></li>-->
<!--        </ol>-->
<!--        &lt;!&ndash; Wrapper for slides &ndash;&gt;-->
<!--        <div class="carousel-inner " role="listbox" >-->
<!--            <div class="item " style="text-align: center"   th:each="blog,stat: ${recommendBlogs}" th:classappend="${stat.index == 0}? 'active'">-->
<!--                <a href="#" th:href="@{/blog/{id}(id=${blog.id})}">-->
<!--                <img src="../static/images/slide1.jpg" th:src="${blog.firstPicture}" style="display: inline-block" alt="1">-->
<!--                <div class="carousel-caption">-->
<!--&lt;!&ndash;                    <p th:text="${blog.title}">...</p>&ndash;&gt;-->
<!--                </div>-->
<!--                </a>-->
<!--        </div>-->
<!--            ...-->
<!--        </div>-->

<!--        &lt;!&ndash; Controls &ndash;&gt;-->
<!--        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">-->
<!--            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
<!--            <span class="sr-only">Previous</span>-->
<!--        </a>-->
<!--        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">-->
<!--            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>-->
<!--            <span class="sr-only">Next</span>-->
<!--        </a>-->
<!--    </div>-->
<!--</div>-->
    <!--最新推荐-->
    <div class="ui m-padded-tb-large">
        <div class="ui m-container-small m-opacity">
            <div class="ui secondary segment " align="center">
                <i class="bookmark icon"></i>最新推荐
            </div>
        </div>
        <div class="ui stackable m-container-mini m-opacity grid">
            <div class="m-margin-tb-tiny four wide column" th:each="blog : ${recommendBlogs}">
                <a href="#" class="class_outer" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                    <img src="../static/images/slide1.jpg" th:src="@{${blog.firstPicture}}"  alt="" class="ui rounded image" width="300px" height="200px;">
                    <span class="class_cover" >
                     <h4 class="m-font-size-blog-text m-margin-tb-tiny" th:text="${blog.title}">大圣，此去欲何?</h4>
                  </span>
                </a>
            </div>
        </div>
    </div>
    <div >
        <!--中间内容-->
        <div class="m-padded-tb-big animated fadeIn">
            <div class="ui container">
<!--                修改-->
                <div class="ui stackable grid " align="center">
                    <!--博客内容-->
                    <div class="ui vertical segment" style=" margin:0 auto;">
                        <div class="ui m-container-small m-opacity">
                            <div class="ui secondary segment " align="center">
                                <i class="bookmark icon"></i>最新文章
                            </div>
                        </div>
                        <!--博文列表-->
                        <div class="ui padded segment m-padded-tb-large m-opacity" th:each="blog : ${blogs.list}">
                            <div class="ui large aligned mobile reversed stackable grid">
                                <!--博文信息-->
                                <div class="eleven wide column ">
                                    <h3 class="ui header" ><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black m-title-font" th:text="${blog.title}">大圣，此去欲何?</a></h3>
                                    <p class="m-text m-margin-top-max" th:text="|${blog.description}......|">戴上金箍，没法爱你；放下金箍，没法保护你。我知道上天不会给我第二次机会，曾经我们说好的永远，原来也仅仅只有，十二画，而已。“大圣，此去欲何?”“踏南天，碎凌霄。”“若一去不回……”“便一去不回” 其实很多时候，我们都是有机会的，最后真正放弃的，是我们自己。......</p>
                                    <div class="ui m-margin-top-max grid">
                                        <div class="eleven wide column">
                                            <div class="ui mini horizontal link list">
                                                <div class="item">
                                                    <img src="../static/images/me.jpg" th:src="@{${blog.avatar}}"  alt="" class="ui avatar image">
                                                    <div class="content"><a href="#" th:href="@{/about}" target="_blank" class="header" th:text="${blog.nickname}" >oneStar</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-01-01</span>
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i> <span th:text="${blog.views}">2222</span>
                                                </div>
                                                <div class="item">
                                                    <i class="comment outline icon"></i> <span th:text="${blog.commentCount}">2222</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="right aligned five wide column">
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.typeName}">好文</a>
                                        </div>
                                    </div>
                                </div>
                                <!--博文图片-->
                                <div class="five wide column">
                                    <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                                        <img src="../static/images/backimg1.jpg" th:src="@{${blog.firstPicture}}"  alt="" class="ui rounded image"  width="300px" height="200px">
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!--分页-->
                    <div class="ui bottom attached segment m-opacity stackable grid">
                        <div class="three wide column" align="center">
                            <a class="item" th:href="@{/(pageNum=${blogs.hasPreviousPage}?${blogs.prePage}:1)}" th:unless="${blogs.isFirstPage}">上一页</a>
                        </div>

                        <div class="ten wide column" align="center">
                            <p> <span th:text="${blogs.pageNum}"></span> / <span th:text="${blogs.pages}"></span> </p>
                        </div>

                        <div class="three wide column" align="center">
                            <a class="item" th:href="@{/(pageNum=${blogs.hasNextPage}?${blogs.nextPage}:${blogs.pages})}" th:unless="${blogs.isLastPage}">下一页</a>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>
</div>

<div class="footer">
    <br>
    <br>
    <br>
<!--    &lt;!&ndash;底部栏&ndash;&gt;-->
<!--    <footer class="ui inverted vertical segment m-padded-tb-massive m-opacity">-->
<!--        &lt;!&ndash;容器&ndash;&gt;-->
<!--        <div class="ui center aligned container">-->
<!--            <div class="ui inverted divided stackable grid">-->
<!--                <div class="four wide column">-->
<!--                    <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced m-margin-top-max" >联系我</div>-->
<!--                    &lt;!&ndash;<div id="newblog-container">&ndash;&gt;-->
<!--                    &lt;!&ndash;<div class="ui inverted link list" th:fragment="newblogList">&ndash;&gt;-->
<!--                    &lt;!&ndash;<a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item m-text-thin" th:each="blog : ${newblogs}" th:text="${blog.title}">最新文章</a>&ndash;&gt;-->
<!--                    &lt;!&ndash;</div>&ndash;&gt;-->
<!--                    &lt;!&ndash;</div>&ndash;&gt;-->
<!--                    <div class="ui inverted link list">-->
<!--                        <div href="#" class="m-text-thin">Email：onestarlr@hotmail.com</div>-->
<!--                        <div href="#" class="m-text-thin">QQ：316392836</div>-->
<!--                    </div>-->
<!--                </div>-->

<!--                <div class="four wide column" >-->
<!--                    <div class="ui inverted link list">-->
<!--                        <div class="item">-->
<!--                            &lt;!&ndash;微信二维码&ndash;&gt;-->
<!--                            <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced " >关注公众号</div>-->
<!--                            <img src="../static/images/oneStar.jpg" th:src="@{/images/oneStar.jpg}"  class="ui m-margin-top rounded image" alt="" style="width: 110px">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->

<!--                <div class="four wide column">-->
<!--                    <div class="ui inverted link list">-->
<!--                        <div class="item">-->
<!--                            &lt;!&ndash;微信二维码&ndash;&gt;-->
<!--                            <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced " >问题交流（QQ群）</div>-->
<!--                            <img src="../static/images/QQ-question.jpg" th:src="@{/images/QQ-question.jpg}"  class="ui m-margin-top rounded image" alt="" style="width: 110px">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash;博客运行时间统计&ndash;&gt;-->
<!--                <div class="four wide column">-->
<!--                    <div style="font-size: large;font-weight: bold" class="ui inverted  m-text-thin m-text-spaced m-margin-top">客栈信息</div>-->
<!--                    &lt;!&ndash;<p id="htmer_time" class="item m-text-thin"></p>&ndash;&gt;-->
<!--                    <div id="blog-message">-->
<!--                        <div class="ui inverted link list" style="align-content: center;margin-top: 10px" th:fragment="blogMessage">-->
<!--                            <div class="m-text-thin" style="text-align: left;margin-left: 75px;">-->
<!--                                文章总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogTotal}"> 14 </h2> 篇-->
<!--                            </div>-->
<!--                            <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--                                访问总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogViewTotal}"> 14 </h2> 次-->
<!--                            </div>-->
<!--                            <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--                                评论总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogCommentTotal}"> 14 </h2> 条-->
<!--                            </div>-->
<!--                            <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--                                留言总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogMessageTotal}"> 14 </h2> 条-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="ui inverted section divider"></div>-->
<!--            <div style="color: #F08047;margin-top: -18px" class="ui inverted m-text-thin m-text-spaced">我的客栈已营业：<span id="htmer_time" class="item m-text-thin"></span> (*๓´╰╯`๓)</div>-->
<!--            <a rel="nofollow" href="http://www.beian.miit.gov.cn" target="_blank">赣ICP备20004408号-1</a>-->
<!--        </div>-->
<!--</footer>-->
</div>
<script>
    $('#blog-message').load(/*[[@{/footer/blogmessage}]]*/"/footer/blogmessage");
</script>
</body>
</html>